<template>
    <el-form label-width="100px">
        <el-form-item label="sku名称">
            <el-input placeholder="SKU名称" v-model="skuParams.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格（元）">
            <el-input placeholder="价格（元）" type="number" v-model="skuParams.price"></el-input>
        </el-form-item>
        <el-form-item label="重量（g）">
            <el-input placeholder="重量（g）" type="number" v-model="skuParams.weight"></el-input>
        </el-form-item>
        <el-form-item label="SKU描述" >
            <el-input placeholder="SKU描述" type="textarea" v-model="skuParams.skuDesc"></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true">
                <el-form-item :label="item.attrName" v-for="(item,index) in attrArr" :key="item.id">
                    <el-select style="width: 200px;" v-model="item.attrIdAndValueId">
                        <el-option :value="`${item.id}:${attrValue.id}`" :label="attrValue.valueName" v-for="(attrValue,index) in item.attrValueList" :key="attrValue.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form :inline="true">
                <el-form-item :label="item.saleAttrName" v-for="(item,index) in saleArr" :key="item.id">
                    <el-select style="width: 200px;" v-model="item.saleIdAndValueId">
                        <el-option :value="`${item.id}:${saleAttrValue.id}`" :label="saleAttrValue.saleAttrValueName" v-for="(saleAttrValue,index) in item.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table border :data="imgArr" ref="table">
                <el-table-column type="selection" width="80px" align="center"></el-table-column>
                <el-table-column label="图片">
                    <template #="{row,$index}">
                        <img :src="row.imgUrl" style="width: 100px; height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName"></el-table-column>
                <el-table-column label="操作">
                    <template #="{row,$index}">
                        <el-button type="primary" size="small" @click="handler(row)">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { reqAttr } from '@/api/product/attr';
import { reqSpuImageList ,reqSpuHasSaleAttr, reqAddSku} from '@/api/product/spu';
import { SkuData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
//平台属性
let attrArr=ref<any>([]);
//销售属性
let saleArr=ref<any>([]);
//照片墙数据
let imgArr=ref<any>([]);
//获取table组件实例
let table=ref<any>();
//收集SKU的参数
let skuParams=reactive<SkuData>({
    category3Id: "", //三级分类的ID
    spuId: "", //已有的SPU的ID
    tmId: "", //SPU品牌的ID
    skuName: "", //sku名字
    price: "", //sku价格
    weight: "", //sku重量
    skuDesc: "", //sku的描述
    skuAttrValueList: [
        
    ],
    skuSaleAttrValueList: [
        
    ],
    skuDefaultImg: "", //sku图片地址
})











let $emit=defineEmits(['changeScene']);
//取消按钮
const cancel=()=>{
    $emit('changeScene',{flag:0,params: ''})
}

const initSkuDate=async (c1Id:number|string,c2Id:number|string,spu:any)=>{
    //收集数据
    skuParams.category3Id=spu.category3Id;
    skuParams.spuId=spu.id;
    skuParams.tmId=spu.tmId;




   //获取平台属性
   let result:any= await reqAttr(c1Id,c2Id,spu.category3Id);
   console.log("平台属性");
   console.log(result);
   attrArr.value=result.data;
   //获取对应的销售属性
   let result1:any=await reqSpuHasSaleAttr(spu.id);
   console.log("销售属性");
   console.log(result1);
   saleArr.value=result1.data;
   //获取照片墙的数据
   let result2: any=await reqSpuImageList(spu.id);
   console.log("照片墙数据");
   console.log(result2);
   imgArr.value=result2.data;
}
//设置默认图片的方法回调
const handler=(row:any)=>{
    table.value.clearSelection();
    skuParams.skuDefaultImg=row.imgUrl;
    table.value.toggleRowSelection(row,true);
}

//保存按钮
const save=async ()=>{
    //整理参数
    //平台属性
    skuParams.skuAttrValueList=attrArr.value.reduce((prev:any,next:any)=>{
        if(next.attrIdAndValueId){
            let[attrId,valueId] = next.attrIdAndValueId.split(':');
            prev.push({
                attrId,
                valueId,
            })
        }
        return prev;
    },[]);
    //销售属性
    skuParams.skuSaleAttrValueList=saleArr.value.reduce((prev:any,next:any)=>{
        if(next.saleIdAndValueId){
           let [saleAttrId,saleAttrValueId] =  next.saleIdAndValueId.split(':');
           prev.push({
            saleAttrId,
            saleAttrValueId,
           })
        }
        return prev;
    },[]);
    //发请求
    //添加sku
    let result= await reqAddSku(skuParams);
    console.log("添加sku");
    console.log(result);
    if(result.code==200){
        ElMessage({
            type: 'success',
            message: "添加sku成功",
        })
    }
    else{
        ElMessage({
            type: 'error',
            message: "添加sku失败",
        })
    }
    $emit('changeScene',{flag: 0,params: ''})
}












defineExpose({
    initSkuDate,
})
</script>
<style scoped></style>